<template>
	<view>
		<view class="index-box">
			<text class="index-text">当前页面为 vue 页面引用 uni-ui 组件示例</text>
		</view>
		<uni-section title="布局组件" type="line"></uni-section>
		<uni-list>
			<uni-list-item v-for="(layout, index) in layouts" :key="index" :title="layout.name" @click="goDetailPage(layout)" />
		</uni-list>
		<uni-section title="基础组件" type="line"></uni-section>
		<uni-list>
			<uni-list-item v-for="(view, index) in views" :key="index" :title="view.name" @click="goDetailPage(view)" />
		</uni-list>
		<uni-section title="功能组件" type="line"></uni-section>
		<uni-list>
			<uni-list-item v-for="(func, index) in functionals" :key="index" :title="func.name" @click="goDetailPage(func)" />
		</uni-list>
		<uni-section title="导航" type="line"></uni-section>
		<uni-list>
			<uni-list-item v-for="(navi, index) in navigations" :key="index" :title="navi.name" @click="goDetailPage(navi)" />
		</uni-list>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				layouts: [],
				views: [],
				functionals: [],
				navigations: []
			}
		},
		onLoad() {
			setTimeout(()=>{
				this.setAjax()
			},200);
			
		},
		methods: {
			/* 获取列表数据 */
			async setAjax(){
				this.layouts = await this.$api.json('layouts')
				this.views = await this.$api.json('views')
				this.functionals = await this.$api.json('functionals')
				this.navigations = await this.$api.json('navigations')
			},
			goDetailPage(e) {
				let path = e.url
				uni.navigateTo({
					url: `/pages/vue/${path}/${path}`
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '@/common/uni-nvue.scss';

	.index-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		height: 50upx;
		padding: 0 15px;
	}

	.index-text {
		font-size: 14px;
		color: #666;
	}
</style>
